<template>
    <div class="base-descriptions">
        <!--<el-descriptions v-bind:="$attrs">
            <el-descriptions-item v-for="item of descriptionList" :key="item.key" :label="item.label">{{
                getDefaultValue(data[item.key])
            }}</el-descriptions-item>
        </el-descriptions>-->
        <template v-for="item of descriptionList" :key="item.key">
            <div class="text-right text-[#5A5A5A]" v-text="item.label"></div>
            <div class="text-[#30333A]" v-text="DataFormat.getDefaultValue(data[item.key])"></div>
        </template>
    </div>
</template>

<script lang="ts" setup>
/**
 * @ClassName BaseDescriptions
 * @Description 描述列表
 * @Author xuyizhuo
 * @Date 2024/12/20 21:13
 * @example
 */
import DataFormat from '@/utils/DataFormat'

interface DescriptionItem {
    key: string
    label: string
}

interface VueProps {
    column?: number // 分几栏
    descriptionList: DescriptionItem[] // 描述列表
    data: AnyObject // 数据列表
}

defineProps<VueProps>()
</script>

<style lang="scss" scoped>
.base-descriptions {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    row-gap: 16px;
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    // :deep(.el-descriptions) {
    //     .el-descriptions__body {
    //         background-color: unset;
    //
    //         .el-descriptions__label {
    //             width: 200px;
    //         }
    //     }
    // }
}
</style>
